
<template>
  <div class="drag container containerH bge6 flex-xy">
    <!-- 调用组件  -->
    <!-- <draggable element="ul" v-model="listdata">
       <div v-for="(item,i) in listdata" :key="i">{{item.name}}</div>
    </draggable>-->
    <!-- 展示list数据效果 -->
    <!-- {{listdata}} -->
    <div class="w95 h98 bgF flex-spc-x">
      <!-- 左侧 -->
      <div class="w70 h100 coF">
        <draggable
          :group="{name: 'menu', put: true}"
          v-model="listdata"
          :sort="true"
          class="listdata w100 h100"
          :move="onMovelistdata"
        >
          <div class="oneItem" v-for="(item,i) in listdata" :key="i">{{item.name}}</div>
        </draggable>
      </div>
      <!-- 右侧 -->
      <div class="w30 h100 bgBlueDark">
        <div class="w100 h50">
          <draggable
            :group="{name: 'menu', put: true}"
            v-model="listUp"
            :sort="true"
            class="listUp w100 h100"
            id="listUp"
          >
            <div
              @onEnd="onEndlistUp"
              @onAdd="onAddonEndlistUp"
              @onClone="onClonelistUp"
              class="oneItem"
              v-for="(item,i) in listUp"
              :key="i"
            >{{item.name}}</div>
          </draggable>
        </div>
        <div class="w100 h50 bgBlue">
          <draggable
            :group="{name: 'menu', put: true}"
            v-model="listDown"
            :sort="true"
            class="listDown w100 h100"
          >
            <div class="oneItem" v-for="(item,i) in listDown" :key="i">{{item.name}}</div>
          </draggable>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "drag",
  components: {
    draggable
  },
  data() {
    return {
      listdata: [
        {
          id: 1,
          name: "日月之行"
        },
        {
          id: 2,
          name: "若出其中"
        },
        {
          id: 3,
          name: "星汉灿烂"
        },
        {
          id: 4,
          name: "若出其里"
        },
        {
          id: 5,
          name: "潮平两岸阔"
        },
        {
          id: 6,
          name: "风正一帆悬"
        },
        {
          id: 7,
          name: "几处早莺争暖树"
        },
        {
          id: 8,
          name: "谁家新燕啄春泥"
        },
        {
          id: 7,
          name: "我寄愁心与明月"
        },
        {
          id: 8,
          name: "随风直到夜郎西"
        }
      ],
      listUp: [],
      listDown: []
    };
  },
  methods: {
    //   1111
    addCollection(e) {
      console.log(e);
    },

    sortCollection(e) {
      console.log(e);
    },
    onMovelistdata({ relatedContext, draggedContext, to }) {
      const relatedElement = relatedContext.element;
      const draggedElement = draggedContext.element;
      let dragInEl = to["id"];
      console.log(relatedElement, draggedElement, dragInEl);
    },
    // 2222
    onEndlistUp(e) {
      console.log(e);
    },
    onAddonEndlistUp(e) {
      console.log(e);
    },
    onClonelistUp(e) {
      console.log(e);
    }

    // 3333
  }
};
</script>
<style  scoped>
.oneItem {
  width: 50px;
  height: auto;
  background: lightblue;
  text-align: center;
  margin: 20px;
  display: inline-block;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;
  
}
</style>
